<template>
    <div class="container">
        <div class="setup-header">
            <div class="header">
                <router-link tag="span" to="/mi">&lt;</router-link>
                <h3>设置</h3>
                <router-link to="/home"><img src="../assets/img/wuzi.png" alt=""></router-link>
            </div>
        </div>
        <div class="setup-main">
            <div class="item">
                <p>个人信息</p>
                <span>&gt;</span>
            </div>
            <div class="item">
                <p>账户安全</p>
                <span>&gt;</span>
            </div>
        </div>

        <div class="setup-main">
            <div class="item">
                <p>紧急联系人</p>
                <span>&gt;</span>
            </div>
            <div class="item">
                <p>常用驾驶人</p>
                <span>&gt;</span>
            </div>
        </div>

        <div class="setup-main">
            <div class="item">
                <p>关于我们</p>
                <span>&gt;</span>
            </div>
        </div>
        <div class="quit" @click="quit">退出登录</div>
    </div>
</template>

<script>
export default {
    methods: {
        quit() {
            window.localStorage.removeItem("token", "token值");
            window.localStorage.removeItem("userId", "13123123");
            this.$toast("退出登录");
            this.$router.push("/home");
        }
    }
}
</script>

<style lang="scss" scoped>
.setup-header {
    width: 100%;
    border-bottom: 1px solid #eee;

    .header {
        width: 90%;
        height: 55px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            font-size: 20px;
            font-weight: 600;
            font-family: "仿宋";
        }

        h3 {
            font-weight: 400;
        }

        img {
            width: 20px;
            height: 20px;
        }
    }
}

.setup-main {
    width: 100%;
    border-top: 1px solid #eee;
    margin-top: 20px;

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px;
        border-bottom: 1px solid #eee;

        span {
            color: #eee;
        }
    }
}

.quit {
    width: 100%;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #49dcbf;
    text-align: center;
    padding: 15px 0;
    margin-top: 15px;
}
</style>